场景3：React 与 Electron 集成的两种方案
概述
除 Vue 外，React 也是 Electron 开发中常用的前端框架。本节介绍两种 React + Electron 集成方案：electron-react-boilerplate 模板方案和基于 Vite 的轻量方案。
方案对比
| 维度 | electron-react-boilerplate | Vite + React + Electron |
|---|---|---|
| 构建工具 | Webpack | Vite |
| 启动速度 | 较慢（Webpack 编译） | 极快（ESM 原生） |
| 生态集成 | 丰富（开箱即用） | 按需集成 |
| 更新频度 | 高 | 社区维护 |
| 学习成本 | 中等 | 低 |
| 适用场景 | 大型桌面应用 | 轻量/中等规模应用 |
方案一：electron-react-boilerplate
项目简介
electron-react-boilerplate 是最成熟的 React + Electron 模板项目，社区活跃、文档完善。
快速启动
# 使用 degit 克隆模板
npx degit electron-react-boilerplate/electron-react-boilerplate react-electron-demo
# 安装依赖
cd react-electron-demo
pnpm install
# 启动开发模式
pnpm start
bash
启动流程
pnpm start
├── 启动 TypeScript 编译
├── Webpack 打包主进程和渲染进程
├── 启动 Electron 进程
└── 打开应用窗口
bash
核心特性
| 特性 | 说明 |
|---|---|
| TypeScript | 全面支持，类型安全 |
| React Router | 内置路由方案 |
| Redux / Zustand | 状态管理（可选） |
| Electron Builder | 多平台打包 |
| HMR | 热模块替换 |
| ESLint + Prettier | 代码规范 |
| 测试框架 | Jest + Testing Library |
项目结构
react-electron-demo/
├── src/
│ ├── main/ # 主进程
│ │ ├── main.ts
│ │ ├── preload.ts
│ │ └── ipc.ts
│ ├── renderer/ # 渲染进程（React）
│ │ ├── App.tsx
│ │ ├── index.tsx
│ │ ├── components/
│ │ ├── pages/
│ │ └── store/
│ └── shared/ # 共享代码
├── electron-builder.yml
├── webpack.config.ts
└── package.json
text
方案二：Vite + React + Electron
快速搭建
# 创建 Vite + React 项目
pnpm create vite react-vite-electron --template react-ts
cd react-vite-electron
# 安装 Electron 相关依赖
pnpm add -D electron electron-builder
pnpm add -D vite-plugin-electron
bash
配置 Vite
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import electron from 'vite-plugin-electron'
export default defineConfig({
plugins: [
react(),
electron([
{
entry: 'electron/main.ts',
},
{
entry: 'electron/preload.ts',
onstart(options) {
options.reload()
},
},
]),
],
})
typescript
主进程入口
// electron/main.ts
import { app, BrowserWindow } from 'electron'
import path from 'node:path'
app.whenReady().then(() => {
const win = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
},
})
if (process.env.NODE_ENV === 'development') {
win.loadURL('http://localhost:5173')
} else {
win.loadFile('dist/index.html')
}
})
typescript
选型建议
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 企业级桌面应用 | electron-react-boilerplate | 功能完善、开箱即用 |
| 快速原型/小项目 | Vite + React + Electron | 轻量、启动快 |
| 已有 React 项目 | Vite + Electron 插件 | 渐进式集成 |
| 追求构建性能 | Vite 方案 | HMR 和构建速度优势 |
实践要点
electron-react-boilerplate集成了 Redux 等状态管理方案，适合需要完整技术栈的项目- Vite 方案更轻量，适合偏好 Vite 构建体验的开发者
- React 的 JSX/TSX 文件需要在 Vite 中正确配置 JSX 转换
- 两种方案的主进程代码完全相同，区别仅在渲染进程的构建方式
- 选择方案时考虑团队技术栈熟悉度和项目长期维护需求
↑